<!-- 顶部栏 -->
<template>
	<div class="layout-top-bar" :class="[tabStyle]">
		<div class="menu">
			<div class="left" style="display: flex">
				<!-- 系统信息  -->
				<div class="top-header" @click="toHome" v-if="isTopMenu">
					<ArtLogo class="logo"/>
					<p v-if="width >= 1400">{{ AppConfig.systemInfo.name }}</p>
				</div>

				<ArtLogo class="logo2" @click="toHome"/>

				<!-- 菜单按钮 -->
				<div class="btn-box" v-if="isLeftMenu && shouldShowMenuButton">
					<div class="btn menu-btn">
						<i class="iconfont-sys" @click="visibleMenu">&#xe6ba;</i>
					</div>
				</div>
				<!-- 刷新按钮 -->
				<div class="btn-box" v-if="shouldShowRefreshButton">
					<div class="btn refresh-btn"
					     :style="{ marginLeft: !isLeftMenu ? '10px' : '0' }">
						<i class="iconfont-sys" @click="reload()"> &#xe6b3; </i>
					</div>
				</div>

				<!-- 快速入口 -->
				<ArtFastEnter v-if="shouldShowFastEnter && width >= headerBarFastEnterMinWidth"/>

				<!-- 面包屑 -->
				<ArtBreadcrumb
					v-if="(shouldShowBreadcrumb && isLeftMenu) || (shouldShowBreadcrumb && isDualMenu)"
				/>

				<!-- 顶部菜单 -->
				<ArtHorizontalMenu v-if="isTopMenu" :list="menuList"/>

				<!-- 混合菜单-顶部 -->
				<ArtMixedMenu v-if="isTopLeftMenu" :list="menuList"/>
			</div>

			<div class="right">
				<!-- 搜索 -->
				<div class="search-wrap" v-if="shouldShowGlobalSearch">
					<div class="search-input" @click="openSearchDialog">
						<div class="left">
							<i class="iconfont-sys">&#xe710;</i>
							<span>{{ $t('topBar.search.title') }}</span>
						</div>
						<div class="search-keydown">
							<i class="iconfont-sys" v-if="isWindows">&#xeeac;</i>
							<i class="iconfont-sys" v-else>&#xe9ab;</i>
							<span>k</span>
						</div>
					</div>
				</div>

				<!-- 用户头像、菜单 -->
				<div class="user">
					<ElPopover
						ref="userMenuPopover"
						placement="bottom-end"
						:width="240"
						:hide-after="0"
						:offset="10"
						trigger="hover"
						:show-arrow="false"
						popper-class="user-menu-popover"
						popper-style="border: 1px solid var(--art-border-dashed-color); border-radius: calc(var(--custom-radius) / 2 + 4px); padding: 5px 16px; 5px 16px;"
					>
						<template #reference>
							<img class="cover" src="@imgs/user/avatar.webp" alt="avatar"/>
						</template>
						<template #default>
							<div class="user-menu-box">
								<div class="user-head">
									<img class="cover" src="@imgs/user/avatar.webp"
									     style="float: left"/>
									<div class="user-wrap">
										<span class="name">
											{{userInfo.userName}}
										</span>
										<span class="email">
											{{userInfo.email}}
										</span>
									</div>
								</div>
								<ul class="user-menu">
									<li @click="goPage('/system/user-center')">
										<i class="menu-icon iconfont-sys">&#xe734;</i>
										<span class="menu-txt">
											{{$t('topBar.user.userCenter')}}
										</span>
									</li>
									<li @click="toDocs()">
										<i class="menu-icon iconfont-sys"
										   style="font-size: 15px">&#xe828;</i>
										<span class="menu-txt">
											{{$t('topBar.user.docs')}}
										</span>
									</li>
									<li @click="toGithub()">
										<i class="menu-icon iconfont-sys">&#xe8d6;</i>
										<span class="menu-txt">{{
												$t('topBar.user.github')
											}}</span>
									</li>
									<li @click="lockScreen()">
										<i class="menu-icon iconfont-sys">&#xe817;</i>
										<span class="menu-txt">{{
												$t('topBar.user.lockScreen')
											}}</span>
									</li>
									<div class="line"></div>
									<div class="logout-btn" @click="loginOut">
										{{ $t('topBar.user.logout') }}
									</div>
								</ul>
							</div>
						</template>
					</ElPopover>
				</div>

				<!-- 全屏按钮 -->
				<div class="btn-box screen-box" v-if="shouldShowFullscreen" @click="toggleFullScreen">
					<div
						class="btn"
						:class="{ 'full-screen-btn': !isFullscreen, 'exit-full-screen-btn': isFullscreen }"
					>
						<i class="iconfont-sys">{{ isFullscreen ? '&#xe62d;' : '&#xe8ce;' }}</i>
					</div>
				</div>
				<!-- 通知 -->
				<div class="btn-box notice-btn" v-if="shouldShowNotification" @click="visibleNotice">
					<div class="btn notice-button">
						<i class="iconfont-sys notice-btn">&#xe6c2;</i>
						<span class="count notice-btn"></span>
					</div>
				</div>
				<!-- 聊天 -->
				<div class="btn-box chat-btn" v-if="shouldShowChat" @click="openChat">
					<div class="btn chat-button">
						<i class="iconfont-sys">&#xe89a;</i>
						<span class="dot"></span>
					</div>
				</div>
				<!-- 语言 -->
				<div class="btn-box" v-if="shouldShowLanguage">
					<ElDropdown @command="changeLanguage" popper-class="langDropDownStyle">
						<div class="btn language-btn">
							<i class="iconfont-sys">&#xe611;</i>
						</div>
						<template #dropdown>
							<ElDropdownMenu>
								<div v-for="item in languageOptions" :key="item.value"
								     class="lang-btn-item">
									<ElDropdownItem
										:command="item.value"
										:class="{ 'is-selected': locale === item.value }"
									>
										<span class="menu-txt">{{
												item.label
											}}</span>
										<i v-if="locale === item.value"
										   class="iconfont-sys">&#xe621;</i>
									</ElDropdownItem>
								</div>
							</ElDropdownMenu>
						</template>
					</ElDropdown>
				</div>
				<!-- 切换主题 -->
				<div class="btn-box" v-if="shouldShowThemeToggle" @click="themeAnimation">
					<div class="btn theme-btn">
						<i class="iconfont-sys">{{ isDark ? '&#xe6b5;' : '&#xe725;' }}</i>
					</div>
				</div>
				<!-- 设置 -->
				<div class="btn-box" v-if="shouldShowSettings" @click="openSetting" style="margin-right: 14px;">
					<ElPopover :visible="showSettingGuide" placement="bottom-start" :width="190"
						   :offset="0">
						<template #reference>
							<div class="btn setting-btn">
								<i class="iconfont-sys">&#xe6d0;</i>
							</div>
						</template>
						<template #default>
							<p>
								{{$t('topBar.guide.title') }}
								<span :style="{ color: systemThemeColor }">
									{{$t('topBar.guide.theme')}}
								</span>、
								<span :style="{ color: systemThemeColor }">
									{{$t('topBar.guide.menu')}}
								</span>
								{{ $t('topBar.guide.description') }}
							</p>
						</template>
					</ElPopover>
				</div>
			</div>
		</div>
		<ArtWorkTab/>

		<ArtNotification v-model:value="showNotice" ref="notice"/>
	</div>
</template>

<script setup lang="ts">
import {useI18n} from 'vue-i18n'
import {useRouter} from 'vue-router'
import {ElMessageBox} from 'element-plus'
import {useFullscreen, useWindowSize} from '@vueuse/core'
import {LanguageEnum, MenuTypeEnum} from '@/enums/appEnum'
import {useSettingStore} from '@/store/modules/setting'
import {useUserStore} from '@/store/modules/user'
import {useMenuStore} from '@/store/modules/menu'
import AppConfig from '@/config'
import {languageOptions} from '@/locales'
import {WEB_LINKS} from '@/utils/constants'
import {mittBus} from '@/utils/sys'
import {themeAnimation} from '@/utils/theme/animation'
import {useCommon} from '@/composables/useCommon'
import {useHeaderBar} from '@/composables/useHeaderBar'

defineOptions({name: 'ArtHeaderBar'})

// 检测操作系统类型
const isWindows = navigator.userAgent.includes('Windows')

const router = useRouter()
const {locale, t} = useI18n()
const {width} = useWindowSize()

const settingStore = useSettingStore()
const userStore = useUserStore()
const menuStore = useMenuStore()

// 顶部栏功能配置
const {
	shouldShowMenuButton,
	shouldShowRefreshButton,
	shouldShowFastEnter,
	shouldShowBreadcrumb,
	shouldShowGlobalSearch,
	shouldShowFullscreen,
	shouldShowNotification,
	shouldShowChat,
	shouldShowLanguage,
	shouldShowSettings,
	shouldShowThemeToggle,
	fastEnterMinWidth: headerBarFastEnterMinWidth
} = useHeaderBar()

const {menuOpen, systemThemeColor, showSettingGuide, menuType, isDark, tabStyle} =
	storeToRefs(settingStore)

const {language, getUserInfo: userInfo} = storeToRefs(userStore)
const {menuList} = storeToRefs(menuStore)

const showNotice = ref(false)
const notice = ref(null)
const userMenuPopover = ref()

// 菜单类型判断
const isLeftMenu = computed(() => menuType.value === MenuTypeEnum.LEFT)
const isDualMenu = computed(() => menuType.value === MenuTypeEnum.DUAL_MENU)
const isTopMenu = computed(() => menuType.value === MenuTypeEnum.TOP)
const isTopLeftMenu = computed(() => menuType.value === MenuTypeEnum.TOP_LEFT)

const {isFullscreen, toggle: toggleFullscreen} = useFullscreen()

onMounted(() => {
	initLanguage()
	document.addEventListener('click', bodyCloseNotice)
})

onUnmounted(() => {
	document.removeEventListener('click', bodyCloseNotice)
})

/**
 * 切换全屏状态
 */
const toggleFullScreen = (): void => {
	toggleFullscreen()
}

/**
 * 切换菜单显示/隐藏状态
 */
const visibleMenu = (): void => {
	settingStore.setMenuOpen(!menuOpen.value)
}

/**
 * 页面跳转
 * @param {string} path - 目标路径
 */
const goPage = (path: string): void => {
	router.push(path)
}

/**
 * 打开文档页面
 */
const toDocs = (): void => {
	window.open(WEB_LINKS.DOCS)
}

/**
 * 打开 GitHub 页面
 */
const toGithub = (): void => {
	window.open(WEB_LINKS.GITHUB)
}

/**
 * 跳转到首页
 */
const toHome = (): void => {
	router.push(useCommon().homePath.value)
}

/**
 * 用户登出确认
 */
const loginOut = (): void => {
	closeUserMenu()
	setTimeout(() => {
		ElMessageBox.confirm(t('common.logOutTips'), t('common.tips'), {
			confirmButtonText: t('common.confirm'),
			cancelButtonText: t('common.cancel'),
			customClass: 'login-out-dialog'
		}).then(() => {
			userStore.logOut()
		})
	}, 200)
}

/**
 * 刷新页面
 * @param {number} time - 延迟时间，默认为0毫秒
 */
const reload = (time: number = 0): void => {
	setTimeout(() => {
		useCommon().refresh()
	}, time)
}

/**
 * 初始化语言设置
 */
const initLanguage = (): void => {
	locale.value = language.value
}

/**
 * 切换系统语言
 * @param {LanguageEnum} lang - 目标语言类型
 */
const changeLanguage = (lang: LanguageEnum): void => {
	if (locale.value === lang) return
	locale.value = lang
	userStore.setLanguage(lang)
	reload(50)
}

/**
 * 打开设置面板
 */
const openSetting = (): void => {
	mittBus.emit('openSetting')

	// 隐藏设置引导提示
	if (showSettingGuide.value) {
		settingStore.hideSettingGuide()
	}
}

/**
 * 打开全局搜索对话框
 */
const openSearchDialog = (): void => {
	mittBus.emit('openSearchDialog')
}

/**
 * 点击页面其他区域关闭通知面板
 * @param {Event} e - 点击事件对象
 */
const bodyCloseNotice = (e: any): void => {
	let {className} = e.target

	if (showNotice.value) {
		if (typeof className === 'object') {
			showNotice.value = false
			return
		}
		if (className.indexOf('notice-btn') === -1) {
			showNotice.value = false
		}
	}
}

/**
 * 切换通知面板显示状态
 */
const visibleNotice = (): void => {
	showNotice.value = !showNotice.value
}

/**
 * 打开聊天窗口
 */
const openChat = (): void => {
	mittBus.emit('openChat')
}

/**
 * 打开锁屏功能
 */
const lockScreen = (): void => {
	mittBus.emit('openLockScreen')
}

/**
 * 关闭用户菜单弹出层
 */
const closeUserMenu = (): void => {
	setTimeout(() => {
		userMenuPopover.value.hide()
	}, 100)
}
</script>

<style lang="scss" scoped>
@use './style';
@use './mobile';
</style>
